<template>
  <div class="document-diff-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>文档比较工具</h1>
      <p>比较两个 Markdown 文档的差异，支持多种文件格式</p>
    </div>

    <!-- 输入区域 -->
    <div class="input-section">
      <div class="input-panels">
        <!-- 左侧输入 -->
        <DocumentInputPanel
          title="原始文档"
          :content="leftContent"
          placeholder="请输入或粘贴原始文档内容..."
          @update:content="leftContent = $event"
          @file-uploaded="handleFileUploaded"
        />

        <!-- 右侧输入 -->
        <DocumentInputPanel
          title="修改文档"
          :content="rightContent"
          placeholder="请输入或粘贴修改后的文档内容..."
          @update:content="rightContent = $event"
          @file-uploaded="handleFileUploaded"
        />
      </div>

      <!-- 操作按钮 -->
      <div class="action-section">
        <a-button
          type="primary"
          size="large"
          @click="compareDocs"
          :disabled="!leftContent || !rightContent"
          :loading="isComparing"
        >
          <template #icon>
            <DiffOutlined />
          </template>
          开始比较
        </a-button>
        <a-button size="large" @click="loadSampleData">
          <template #icon>
            <FileTextOutlined />
          </template>
          加载示例
        </a-button>
        <a-button size="large" @click="clearAll">
          <template #icon>
            <ClearOutlined />
          </template>
          清空所有
        </a-button>
      </div>
    </div>

    <!-- 比较结果区域 -->
    <div v-if="showDiff" class="diff-section">
      <DiffControlPanel
        :stats="diffStats"
        :output-format="outputFormat"
        @toggle-format="toggleOutputFormat"
      />

      <!-- 差异显示 -->
      <DiffViewer :diff-html="diffHtml" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { DiffOutlined, FileTextOutlined, ClearOutlined } from '@ant-design/icons-vue'
import DocumentInputPanel from '@/components/teacher/documentdiff/DocumentInputPanel.vue'
import DiffControlPanel from '@/components/teacher/documentdiff/DiffControlPanel.vue'
import DiffViewer from '@/components/teacher/documentdiff/DiffViewer.vue'
import {
  useDiffCalculator,
  type DiffStats,
} from '@/components/teacher/documentdiff/useDiffCalculator'
import 'diff2html/bundles/css/diff2html.min.css'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

// 配置 highlight.js
hljs.configure({
  ignoreUnescapedHTML: true,
  languages: [
    'javascript',
    'typescript',
    'html',
    'css',
    'json',
    'markdown',
    'python',
    'java',
    'cpp',
    'c',
    'php',
    'ruby',
    'go',
    'rust',
    'bash',
    'sql',
    'xml',
    'yaml',
  ],
})

// 响应式数据
const leftContent = ref('')
const rightContent = ref('')
const showDiff = ref(false)
const isComparing = ref(false)
const fileName = ref('document.md')
const diffHtml = ref('')
const outputFormat = ref<'side-by-side' | 'line-by-line'>('side-by-side')

// 使用差异计算工具
const { diffStats, generateDiffHtml } = useDiffCalculator(
  () => leftContent.value,
  () => rightContent.value,
  () => outputFormat.value,
)

// 文件上传处理
const handleFileUploaded = (name: string) => {
  fileName.value = name
}

// 清空所有
const clearAll = () => {
  leftContent.value = ''
  rightContent.value = ''
  showDiff.value = false
  diffHtml.value = ''
  fileName.value = 'document.md'
}

// 开始比较
const compareDocs = async () => {
  if (!leftContent.value || !rightContent.value) {
    message.warning('请先输入要比较的文档内容')
    return
  }

  isComparing.value = true

  try {
    // 使用组合式函数生成差异HTML
    diffHtml.value = generateDiffHtml(fileName.value)

    showDiff.value = true
    message.success('文档比较完成')
  } catch (error) {
    console.error('比较失败:', error)
    message.error('文档比较失败，请重试')
  } finally {
    isComparing.value = false
  }
}

// 加载示例数据
const loadSampleData = () => {
  leftContent.value = `// Vue 3 组件示例
import { ref, computed } from 'vue'

export default {
  name: 'UserProfile',
  setup() {
    const user = ref({
      name: 'John Doe',
      age: 25,
      email: 'john@example.com'
    })

    const displayName = computed(() => {
      return user.value.name.toUpperCase()
    })

    function updateUser() {
      user.value.age += 1
    }

    return {
      user,
      displayName,
      updateUser
    }
  }
}`

  rightContent.value = `// Vue 3 组件示例 - 增强版
import { ref, computed, watch } from 'vue'

export default {
  name: 'UserProfile',
  props: {
    userId: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    const user = ref({
      name: 'John Doe',
      age: 25,
      email: 'john@example.com',
      avatar: '/default-avatar.png'
    })

    const displayName = computed(() => {
      return user.value.name.toUpperCase()
    })

    const isAdult = computed(() => {
      return user.value.age >= 18
    })

    function updateUser() {
      user.value.age += 1
      console.log('User age updated:', user.value.age)
    }

    function resetUser() {
      user.value.age = 25
    }

    // 监听用户ID变化
    watch(() => props.userId, (newId) => {
      console.log('User ID changed:', newId)
      // 重新加载用户数据
    })

    return {
      user,
      displayName,
      isAdult,
      updateUser,
      resetUser
    }
  }
}`

  fileName.value = 'UserProfile.js'
  message.success('示例数据已加载')
}

// 切换差异展示模式
const toggleOutputFormat = () => {
  outputFormat.value = outputFormat.value === 'side-by-side' ? 'line-by-line' : 'side-by-side'
  if (showDiff.value) {
    compareDocs() // 重新生成差异
  }
}
</script>

<style scoped>
.document-diff-container {
  min-height: 100vh;
  background: #f8fafc;
  padding: 24px;
  position: relative;
}

.document-diff-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 49%,
    rgba(148, 163, 184, 0.03) 50%,
    transparent 51%
  );
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.page-header h1 {
  margin: 0 0 12px 0;
  font-size: 36px;
  font-weight: 700;
  color: #1e293b;
  text-shadow: none;
  letter-spacing: -0.5px;
}

.page-header p {
  margin: 0;
  color: #64748b;
  font-size: 18px;
  line-height: 1.6;
}

/* 输入区域 */
.input-section {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
  position: relative;
  z-index: 1;
}

.input-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

/* 操作按钮区域 */
.action-section {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.action-section .ant-btn {
  height: 48px;
  padding: 0 32px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-section .ant-btn-primary {
  background: #3b82f6;
  border: none;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.action-section .ant-btn-primary:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow:
    0 6px 12px -1px rgba(0, 0, 0, 0.15),
    0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 比较结果区域 */
.diff-section {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
  position: relative;
  z-index: 1;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .input-panels {
    grid-template-columns: 1fr;
  }

  .diff-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .diff-controls {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .document-diff-container {
    padding: 16px;
  }

  .page-header h1 {
    font-size: 28px;
  }

  .page-header p {
    font-size: 16px;
  }

  .input-section {
    padding: 20px;
    border-radius: 20px;
  }

  .input-panel {
    padding: 16px;
  }

  .action-section {
    flex-direction: column;
    align-items: center;
  }

  .action-section .ant-btn {
    width: 100%;
    max-width: 300px;
  }

  .diff-section {
    padding: 20px;
    border-radius: 20px;
  }
}
</style>
